<template>
  <div class="about">
    <global-header></global-header>
    <div class="w-full bg-28">
      <div class="container relative py-16 flex flex-col">
        <div class="w-full pt-4 flex flex-row pl-4">
          <div class="flex flex-col justify-center items-left mr-2">
            <div class="flex">
              <span class="text-white fs:dn bold-700">V 1.0 Release Notes</span>
            </div>
            <div class="flex items-left text-left items-left">
              <span class="text-white fs:tip"> 01/10/2024 </span>
            </div>
          </div>

          <div class="flex load-size items-center">
            <div class="load-up">
              <span class="text-white fs:tip">latest</span>
            </div>
          </div>
        </div>
        <div class="flex pt-2">
          <div class="vel-rectangle mr-2">
            <div class="vel-bt"><span class="text-white">Velocitas 1.2</span></div>
          </div>
          <div class="leda-rectangle mr-2">
            <div class="leda-bt"><span class="text-white">Leda 1.01</span></div>
          </div>
          <div class="lce-rectangle mr-2">
            <div class="lce-bt"><span class="text-white">Lattice 1.0</span></div>
          </div>
          <div class="kuk-rectangle mr-2">
            <div class="kuk-bt"><span class="text-white">Kuksa 1.3</span></div>
          </div>
        </div>
        <div class="flex flex-col w-80 pt-8 pl-4">
          <ul class="text-left">
            <li>
              <span>Adds Xcode 15.1 Support and API fixes, for full release notes please visit our macios releases page.</span>
            </li>
            <li>Fixed an issue under which some customers, after changing the Target Framework for their Razor project, were unable to see components that were subsequently added.</li>
            <li>Fixed a crash during startup of the Debug > Attach to Process dialog.</li>
          </ul>
        </div>
        <div class="flex w-full justify-right">
          <div>
            <div class="load-bt">
              <span class="text-white fs:load">Download</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <global-footer></global-footer>
  </div>
</template>

<script>
import GlobalHeader from "@/components/GlobalHeader.vue";
import GlobalFooter from "@/components/GlobalFooter.vue";
export default {
  components: { GlobalHeader, GlobalFooter }
};
</script>

<style scoped>
.bg-28 {
  background-color: #282828;
}
bold-700 {
  font-weight: 700;
}
.fs\:dn {
  font-size: 36px;
}
.fs\:tip {
  font-size: 12px;
}
.load-up {
  width: 56px;
  height: 19px;
  border-radius: 50px;
  background: #209702;
}
.load-size {
  width: 79px;
  height: 34px;
}
.vel-rectangle {
  display: flex;
  width: 152px;
  height: 34px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}
.vel-bt {
  width: 152px;
  height: 27px;
  flex-shrink: 0;
  border-radius: 50px;
  background: #b20202;
  text-align: center;
  line-height: 27px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}
.leda-rectangle {
  display: flex;
  width: 152px;
  height: 34px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}

.leda-bt {
  display: flex;
  width: 152px;
  height: 27px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #d1d3ff;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  background-color: #0213ac;
  border-radius: 50px;
}
.lce-rectangle {
  display: flex;
  width: 152px;
  height: 34px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}
.lce-bt {
  display: flex;
  width: 152px;
  height: 27px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #ffe1b5;
  text-align: center;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  border-radius: 50px;
  background-color: #a67803;
}
.kuk-rectangle {
  display: flex;
  width: 152px;
  height: 34px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}
.kuk-bt {
  display: flex;
  width: 152px;
  height: 27px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #ffe1b5;
  text-align: center;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  border-radius: 50px;
  background-color: #03829e;
}

li {
  list-style-type: disc;
  color: #ffffff;
}

.load-bt {
  display: flex;
  width: 190px;
  height: 44px;
  padding: 0px 19px 1px 19px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 3px;
  border: 3px solid #db36ca;
}
.fs\:load {
  color: #e6efff;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
}
</style>
